<template>
  <div>
    <ul>
      <todo-item
        v-for="item in listData"
        :key="item.id"
        :item="item"
        @toggle-completed="toggleCompleted"
        @todo-remove="todoRemove"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from "./TodoItem";
export default {
  name: "Todos",
  props: ["listData"],
  components: {
    TodoItem,
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    toggleCompleted(id) {
      this.$emit("toggleCompleted", id);
    },
    todoRemove(id) {
      this.$emit("todoRemove", id);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>